<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 120 120"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#00407B" d="m112.031 80.45-.011-.013-.012-.011c-5.168-10.934-13.172-16.559-23.824-16.559-10.653 0-18.657 5.637-23.836 16.559v.011a5.029 5.029 0 0 0 0 4.266c5.18 10.922 13.183 16.547 23.836 16.547 10.652 0 18.656-5.637 23.836-16.559a5.023 5.023 0 0 0 .011-4.242Zm-23.847 13.3c-7.278 0-12.586-3.516-16.536-11.191 3.938-7.676 9.258-11.192 16.536-11.192 7.277 0 12.586 3.516 16.535 11.192-3.938 7.675-9.258 11.191-16.535 11.191Z"/><path fill="#00407B" d="M15.938 27.188h82.5v29.648h8.437V22.5a3.746 3.746 0 0 0-3.75-3.75H11.25A3.746 3.746 0 0 0 7.5 22.5v60.938a3.746 3.746 0 0 0 3.75 3.75H52.5V78.75H15.937V27.187Z"/><path fill="#0075DB" d="m84.95 39.621-4.313-4.312a.94.94 0 0 0-1.325 0L57.773 56.87l-10.09-10.1a.94.94 0 0 0-1.324 0L29.45 63.68a.94.94 0 0 0 0 1.325l4.313 4.312a.94.94 0 0 0 1.324 0l11.93-11.93 10.09 10.102a.94.94 0 0 0 1.324 0l26.52-26.543a.92.92 0 0 0 0-1.324Zm-1.348 47.637a6.563 6.563 0 1 1 9.28-9.281 6.563 6.563 0 0 1-9.28 9.28Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionskey4 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
